<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>图书管理系统</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
</head>
    <SCRIPT LANGUAGE="JavaScript">  
        function createCode(len)  
        {  
            var seed = new Array(  
                    'abcdefghijklmnopqrstuvwxyz',  
                    'ABCDEFGHIJKLMNOPQRSTUVWXYZ',  
                    '0123456789'  
            );               //创建需要的数据数组  
            var idx,i;  
            var result = '';   //返回的结果变量  
            for (i=0; i<len; i++) //根据指定的长度  
            {  
                idx = Math.floor(Math.random()*3); //获得随机数据的整数部分-获取一个随机整数  
                result += seed[idx].substr(Math.floor(Math.random()*(seed[idx].length)), 1);//根据随机数获取数据中一个值  
            }  
            return result; //返回随机结果  
        }  
  
        function toVaild() {  
            var inputRandom=document.getElementById("inputRandom").value;  
            var autoRandom=document.getElementById("autoRandom").innerHTML;  
            if(inputRandom==autoRandom) {  
                return true;
            } else {  
                alert("没有通过验证");  
                return false;
            }  
  
        }  
    </SCRIPT>  
<body class="gray-bg">  
    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>

                <h1 class="logo-name"></h1>

            </div>
            <h3>欢迎使用图书管理系统</h3>

            <form class="m-t" role="form"  action="UserInfoServlet?opr=login" method="post" onsubmit="return toVaild()">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名" required="required" name="loginName">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="密码" required="required" name="loginPwd">
                </div>
                
                <div class="form-group" >
                    <input type="text" class="form-control" placeholder="请填写验证码..." required="required" id="inputRandom">
                   
                <label >验证码:</label> <label style="width: 80%; text-align: left;" id="autoRandom" value="" ONCLICK="autoRandom.innerHTML=createCode(5)"></label>
                </div>
                
                <button type="submit" class="btn btn-primary block full-width m-b">登录</button>  
                <button type="button" onclick="register()" class="btn btn-primary block full-width m-b">注册</button> 
                <button type="button" onclick="youke()" class="btn btn-primary block full-width m-b">游客进入</button> 
            </form>
        </div>
    </div>
 
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script> 
	<script type="text/javascript">
	autoRandom.innerHTML=createCode(5);  
	function register(){
		window.location.href="register.jsp"; 
	}
	function youke(){
		window.location.href="UserInfoServlet?opr=youke"; 
	}
	</script>
    
    

</body>

</html>
